<template>
  <div class="main-container">
    <div class="content-item">
      <div class="monopoly-container">
        <div class="store-name">
          <span>店铺：</span>
          <span>仪器仪表专卖</span>
        </div>
        <div class="goods-list">
          <div class="goods-item">
            <!-- <input type="checkbox" v-model="checked" class="all-choose" @click="checkAll" /> -->
            <!-- <input type="checkbox" /> -->

            <img src="../assets/images/steel.png" alt>
            <div class="item-info">
              <div class="name">钢管</div>
              <div class="mark">标 号：外16内6.03</div>
              <div class="mark">标 号：外16内6.03</div>
              <div class="mark">标 号：外16内6.03</div>
            </div>
            <div class="univalence">58.00</div>
            <div class="numble">
              <el-input-number v-model="num" :min="1" @change="handleChange" />
            </div>
            <div class="total-price">58.00</div>
            <div class="results-page">
              <div class="del-roder">
                <i class="el-icon-delete" />
                <span>删除</span>
              </div>
              <div class="to-result" @click="toSearchResult">
                <i class="el-icon-s-order" />
                <span>搜索结果页</span>
              </div>
            </div>
          </div>
          <div class="goods-item">
            <!-- <input type="checkbox" v-model="checked" class="all-choose" @click="checkAll" /> -->
            <!-- <input type="checkbox" /> -->

            <img src="../assets/images/steel.png" alt>
            <div class="item-info">
              <div class="name">钢管</div>
              <div class="mark">标 号：外16内6.03</div>
              <div class="mark">标 号：外16内6.03</div>
              <div class="mark">标 号：外16内6.03</div>
            </div>
            <div class="univalence">58.00</div>
            <div class="numble">
              <el-input-number v-model="num" :min="1" @change="handleChange" />
            </div>
            <div class="total-price">58.00</div>
            <div class="results-page">
              <div class="del-roder">
                <i class="el-icon-delete" />
                <span>删除</span>
              </div>
              <div class="to-result" @click="toSearchResult">
                <i class="el-icon-s-order" />
                <span>搜索结果页</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="money-container">
        <div class="money-details">
          <div class="total-money">2件商品，总商品金额：￥116.00</div>
          <div class="transportation">运输里程：200.00km</div>
          <div class="transportation-money">
            <span>运费总价：</span>
            <span class="all-money" @click="toFreight">￥20.00></span>
          </div>
        </div>
        <div class="total-money">店铺合计：￥116.00</div>
      </div>
    </div>
    <div class="content-item">
      <div class="monopoly-container">
        <div class="store-name">
          <span>店铺：</span>
          <span>仪器仪表专卖</span>
        </div>
        <div class="goods-list">
          <div class="goods-item">
            <!-- <input type="checkbox" v-model="checked" class="all-choose" @click="checkAll" /> -->
            <!-- <input type="checkbox" /> -->

            <img src="../assets/images/steel.png" alt>
            <div class="item-info">
              <div class="name">钢管</div>
              <div class="mark">标 号：外16内6.03</div>
              <div class="mark">标 号：外16内6.03</div>
              <div class="mark">标 号：外16内6.03</div>
            </div>
            <div class="univalence">58.00</div>
            <div class="numble">
              <el-input-number v-model="num" :min="1" @change="handleChange" />
            </div>
            <div class="total-price">58.00</div>
            <div class="results-page">
              <div class="del-roder">
                <i class="el-icon-delete" />
                <span>删除</span>
              </div>
              <div class="to-result" @click="toSearchResult">
                <i class="el-icon-s-order" />
                <span>搜索结果页</span>
              </div>
            </div>
          </div>
          <div class="goods-item">
            <!-- <input type="checkbox" v-model="checked" class="all-choose" @click="checkAll" /> -->
            <!-- <input type="checkbox" /> -->

            <img src="../assets/images/steel.png" alt>
            <div class="item-info">
              <div class="name">钢管</div>
              <div class="mark">标 号：外16内6.03</div>
              <div class="mark">标 号：外16内6.03</div>
              <div class="mark">标 号：外16内6.03</div>
            </div>
            <div class="univalence">58.00</div>
            <div class="numble">
              <el-input-number v-model="num" :min="1" @change="handleChange" />
            </div>
            <div class="total-price">58.00</div>
            <div class="results-page">
              <div class="del-roder">
                <i class="el-icon-delete" />
                <span>删除</span>
              </div>
              <div class="to-result" @click="toSearchResult">
                <i class="el-icon-s-order" />
                <span>搜索结果页</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="money-container">
        <div class="money-details">
          <div class="total-money">2件商品，总商品金额：￥116.00</div>
          <div class="transportation">运输里程：200.00km</div>
          <div class="transportation-money">
            <span>运费总价：</span>
            <span class="all-money" @click="toFreight">￥20.00></span>
          </div>
        </div>
        <div class="total-money">店铺合计：￥116.00</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="scss">
.main-container {
  background-color: #fff;

  .content-item {
    margin-bottom: 20px;

    .monopoly-container {
      .store-name {
      padding: 0 20px;
        background-color: #fff;
        height: 47px;
        line-height: 47px;
        border-bottom: 1px solid #E5E5E5FF;
      }
      .goods-list {
        background-color: #fff;
      padding: 20px 20px 0 20px;
        .goods-item {
          display: flex;
          align-items: center;
          // justify-content: space-between;

          padding: 0 18px 15px 0;
          input {
            margin: 0 10px 0 18px;
          }
          .lose-efficacy {
            margin: 0 2px 0 3px;
            padding: 0 7px;
            background-color: #a7a7aa;
            border-radius: 2px;
            color: #fff;
            font-size: 11px;
          }
          img {
            width: 83px;
            height: 83px;
            object-fit: cover;
            margin-right: 30px;
          }
          .item-info {
            height: 83px;

            .mark {
              font-size: 12px;
              color: #a7a7aa;
            }
          }
          .univalence {
            margin-left: 157px;
          }
          .numble {
            margin: 0 100px;
            ::v-deep .el-input-number {
              display: flex;
              width: 68px;
            }
            ::v-deep .el-input-number__decrease {
              width: 17px;
              height: 17px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-right: 1px solid #dcdfe6;
              top: 1px;
              left: 5px;
            }
            ::v-deep .el-input-number__increase {
              width: 17px;
              height: 17px;
              display: flex;
              justify-content: center;
              top: 1px;
              right: 5px;
              align-items: center;
              border-left: 1px solid #dcdfe6;
            }
            ::v-deep .el-input {
              width: 60px;
              height: 21px !important;
              left: 4px;
              // z-index: 100;
            }
            ::v-deep .el-input__inner {
              display: flex;
              width: 60px;
              padding: 0;
              justify-content: center;
              align-items: center;
              height: 19px !important;
              color: #8e8e93;

              border-radius: 0;
            }
            // .comment {
            //   display: flex;
            //   justify-content: center;
            //   align-items: center;
            //   width: 19px;
            //   height: 19px;
            //   color: #8e8e93;
            //   border: 1px solid #f4f5f7;
            //   background-color: #f5f7fa;
            // }
            // span:nth-child(2) {
            //   width: 30px;
            //   height: 19px;
            //   border: 1px solid #f4f5f7;
            //   display: flex;
            //   justify-content: center;
            //   align-items: center;
            //   color: #8e8e93;
            // }
          }

          .results-page {
            margin-left: 116px;
            color: #6b6b6bff;
            span {
              margin-left: 10px;
            }
          }
          .results-page {
            cursor: pointer;
          }
        }
      }
    }
    .money-container {
      // margin-bottom: 20px;
      height: 69px;
      padding: 15px;
      display: flex;
      background-color: #fff;
      align-items: flex-end;
      justify-content: space-between;
      flex-direction: column;
      color: #6b6b6b;
      border-top: 3px solid #E5E5E5FF;
      .money-details {
        display: flex;
        .transportation {
          margin: 0 25px;
        }
        .transportation-money {
          .all-money {
            color: #02a9f1;
          }
          .all-money:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
